<script lang="tsx" setup>
import LeftTitle from '@/components/basic/LeftTitle.vue'
import DataTitle from '@/components/basic/DataTitle.vue'
import CabinetIC from '@/assets/images/ic-cabinet.png'
import Battery from '@/components/basic/Battery.vue'
import { computed, onMounted, ref, shallowRef } from 'vue'
import { queryBoxDetailInfo } from '@/api/batteryswap'
import { getToken } from '@/utils/cache/cookies'
import * as echarts from 'echarts'
import {
  boxOperationEntity,
  doorDataListEntity,
  queryBoxDetailInfoResponseData,
} from '@/api/batteryswap/types/batteryswap'
import dayjs from 'dayjs'
import { Column } from 'element-plus'
import { useRoute } from 'vue-router'
const data = ref<queryBoxDetailInfoResponseData | null>(null)
const doorDataList = ref<doorDataListEntity[]>([])
const RightMiddleData = ref<string[][]>([])
const RightBottomData = ref<boxOperationEntity[]>([])
const route = useRoute()
const getData = async () => {
  try {
    const res = await queryBoxDetailInfo({
      token: getToken() ?? '',
      produceId: route.query.produceId as string,
      channel: 'Service',
    })
    data.value = res.resultData
    doorDataList.value = res.resultData.doorDataList
    RightMiddleData.value = res.resultData.getChangePowerCount
    RightBottomData.value = res.resultData.boxOperationList
    setChartsData()
  } catch (error) {
    console.error(error)
  }
}
/** 图表 */
const RightMiddleCharts = shallowRef<echarts.ECharts | null>(null)
/** 图表初始化 */
const initCharts = async () => {
  if (RightMiddleCharts.value !== null && RightMiddleCharts.value !== undefined) {
    RightMiddleCharts.value.dispose()
  }
  const batteryAbnormalChartDom = document.getElementById('battery-swap-trend-chart')
  RightMiddleCharts.value = echarts.init(batteryAbnormalChartDom)
  window.onresize = () => {
    RightMiddleCharts.value?.resize()
  }
}
const setChartsData = () => {
  const option: echarts.EChartsCoreOption = {
    series: [
      {
        type: 'line',
        color: '#45AAFF',
      },
    ],
    xAxis: {
      type: 'category',
      nameTextStyle: {
        fontSize: 16,
        color: '#75787E',
      },
      axisLabel: {
        color: '#FFF',
        fontSize: 20,
        formatter: function (value: any) {
          return dayjs(value).format('MM/DD')
        },
        interval: 0,
        margin: 10,
      },
      axisLine: {
        lineStyle: {
          color: '#45AAFF',
          width: 2,
          opacity: 0.3,
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      show: true,
      axisLabel: {
        fontSize: 16,
        color: '#75787E',
        verticalAlign: 'middle',
      },
      nameTextStyle: {
        fontSize: 16,
        color: '#75787E',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#45AAFF',
          width: 2,
          opacity: 0.3,
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
      lineStyle: {
        show: true,
        // 使用深浅的间隔色
        color: '#45AAFF',
        opacity: 0.03,
      },
      splitLine: {
        show: false,
      },
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: '#000',
      borderColor: 'transparent',
      enterable: true,
      textStyle: {
        fontSize: 26,
      },
      formatter: (params: any) => {
        return `<div class="cycle-count-tooltip">
              <div>
              ${params.marker} ${params.dimensionNames[1]}: ${params.value[1]}
              </div>
               <div>
             ${params.marker} ${params.dimensionNames[2]}: ${params.value[2]}
              </div>
           </div>`
      },
    },
    dataset: {
      source: RightMiddleData.value,
    },
  }
  RightMiddleCharts.value?.setOption(option)
}
const getLeftTableCol: () => Column<any>[] = () => {
  return [
    {
      key: 'door-info-doorNumber',
      dataKey: 'doorNumber',
      title: '仓门',
      width: 200,
      align: 'center',
    },
    {
      key: 'door-info-newBatteryNumber',
      dataKey: 'newBatteryNumber',
      title: '电池编号',
      width: 200,
      align: 'center',
    },
    {
      key: 'door-info-batteryPowerLevel',
      dataKey: 'batteryPowerLevel',
      title: '电池电量',
      width: 200,
      align: 'center',
    },
    {
      key: 'door-info-inputVoltage',
      dataKey: 'inputVoltage',
      title: '电压',
      width: 200,
      align: 'center',
    },
  ]
}
const getRightTableCol: () => Column<any>[] = () => {
  return [
    {
      key: 'change-record-updatedTime',
      dataKey: 'updatedTime',
      title: '换电时间',
      width: 250,
      align: 'center',
      cellRenderer: ({ cellData: data }) => (
        <span>{dayjs(data).format('YYYY-MM-DD HH:mm:ss')}</span>
      ),
    },
    {
      key: 'change-record-operationData',
      dataKey: 'operationData',
      title: '操作内容',
      width: 200,
      align: 'center',
    },
    {
      key: 'change-record-batteryNumber',
      dataKey: 'batteryNumber',
      title: '电池编号',
      width: 200,
      align: 'center',
    },
    {
      key: 'change-record-doorNumber',
      dataKey: 'doorNumber',
      title: '对应电柜',
      width: 200,
      align: 'center',
      cellRenderer: ({ cellData: data }) => <span>{data}号仓门</span>,
    },
  ]
}
/** 网络状态转换 */
const formatOnlineStatus = (status?: string) => {
  switch (status) {
    case '0':
      return '断网'
    case '1':
      return '联网'
    default:
      return '未知'
  }
}
const batteryUseCount = computed(
  () => (data.value?.dataDTO.battery48VCount ?? 0) + (data.value?.dataDTO.battery60VCount ?? 0),
)
onMounted(async () => {
  await initCharts()
  await getData()
})
</script>

<template>
  <div class="battery-swapping-cabinet-info">
    <div class="battery-swapping-cabinet-info__left">
      <left-title />
      <div flex flex-col mt-50 rounded-10 p-20 flex-1 class="content-border">
        <div flex flex-col mt-50>
          <data-title title="电柜信息" eg-title="ELECTRICAL CABINET INFORMATION" />
          <div class="battery-info-container bg-[#ffffff0c]">
            <div justify-start items-center>
              电柜编号 : <span>{{ data?.dataDTO.boxCode }}</span>
            </div>
            <div justify-start items-center>
              网络状态 : <span>{{ formatOnlineStatus(data?.dataDTO.boxOnlineStatus) }}</span>
            </div>
            <div justify-start items-start>
              <span whitespace-nowrap>电柜地址 : </span><span text-start>{{ data?.address }}</span>
            </div>
            <div justify-between items-center>
              <span>当前可用:{{ batteryUseCount }}</span>
              <span>48V可换:{{ data?.dataDTO.battery48VCount }}</span>
              <span>60V可换:{{ data?.dataDTO.battery60VCount }}</span>
            </div>
          </div>
        </div>
        <div flex flex-col flex-1 mt-50>
          <data-title title="仓内详情" eg-title="WAREHOUSE DOOR DETAILS" />
          <div class="mt-20 flex-1">
            <el-auto-resizer>
              <template #default="{ height, width }">
                <el-table-v2
                  header-class="table-v2-data-header"
                  :columns="getLeftTableCol()"
                  :data="doorDataList"
                  :width="width"
                  :height="height"
                  :header-height="80"
                  :row-height="80"
                  :fixed="true"
                />
              </template>
            </el-auto-resizer>
          </div>
        </div>
      </div>
    </div>
    <div class="battery-swapping-cabinet-info__center">
      <div class="battery-swap-container">
        <div class="cabinet">
          <div class="cabinet__main">
            <div
              flex
              justify-between
              items-center
              px-50
              py-30
              border-solid
              border-white
              border-b-1
              border-0
            >
              <div w-84 h-84 border-solid border-1 border-white rounded-12 />
              <img :src="CabinetIC" alt="" />
            </div>
            <div
              border-white
              border-solid
              border-1
              grid
              grid-cols-2
              gap-x-40
              flex-1
              grid-flow-col
              grid-rows-5
            >
              <Battery
                v-for="item in doorDataList"
                :key="item.doorNumber"
                :index="item.doorNumber"
                :level="item.batteryPowerLevel.toString()"
                :voltage="item.inputVoltage"
                :box-code="item.newBatteryNumber"
                :time="item.newBatteryTime"
                :empty="item.empty"
              />
            </div>
          </div>
          <div class="cabinet__footer" />
        </div>
      </div>
    </div>
    <div class="battery-swapping-cabinet-info__right">
      <div class="battery-swapping-cabinet-info__right__title" color-blue h-44 />
      <div flex flex-col mt-50 rounded-10 p-20 flex-1 class="content-border">
        <div flex flex-col mt-50>
          <data-title title="换电次数趋势" eg-title="TREND IN THE NUMBER OF BATTERY SWAPS" />
          <div mt-20 class="battery-swap-trend-container">
            <div w-full h-400 id="battery-swap-trend-chart" />
          </div>
        </div>
        <div flex flex-col flex-1 mt-50>
          <data-title title="换电记录" eg-title="BATTERY SWAP RECORD" />
          <div class="change-battery-container mt-20 flex-1">
            <el-auto-resizer>
              <template #default="{ height, width }">
                <el-table-v2
                  header-class="table-v2-data-header"
                  :columns="getRightTableCol()"
                  :data="RightBottomData"
                  :width="width"
                  :height="height"
                  :header-height="80"
                  :row-height="80"
                  :fixed="true"
                />
              </template>
            </el-auto-resizer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.battery-swapping-cabinet-info {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 10;
  &__left {
    display: flex;
    flex-direction: column;
    width: 26%;
    height: 95%;
    padding: 100px 50px;
  }
  &__right {
    width: 30%;
    height: 95%;
    padding: 100px 50px;
    display: flex;
    flex-direction: column;
    &__title {
      display: flex;
      align-items: center;
      font-size: 36px;
      line-height: 42px;
    }
  }
}
.battery-info-container {
  font-size: 28px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  > div {
    display: flex;
  }
  > div + div {
    margin-top: 40px;
  }
}
:deep(.battery-compartment-info-header, .change-battery-info-header) {
  background: linear-gradient(to right, #132239 0%, #1b75ff 51%, rgba(19, 34, 57, 0.22) 100%);
  font-size: 28px;
  border-image: linear-gradient(
      90deg,
      rgba(5, 14, 32, 1),
      rgba(72, 172, 255, 1),
      rgba(5, 14, 32, 1)
    )
    2 2;
  border: 2px solid;
  border-left: 0;
  border-right: 0;
}
:deep(.change-battery-info-header) {
  background: linear-gradient(to right, #132239 0%, #1b75ff 51%, rgba(19, 34, 57, 0.22) 100%);
  font-size: 28px;
  border-image: linear-gradient(
      90deg,
      rgba(5, 14, 32, 1),
      rgba(72, 172, 255, 1),
      rgba(5, 14, 32, 1)
    )
    2 2;
  border: 2px solid;
  border-left: 0;
  border-right: 0;
}
.battery-swapping-cabinet-info__center {
  width: 50%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.battery-swap-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  box-sizing: border-box;
  padding: 30px;
  color: #fff;
  background-image: url(/src/assets/images/circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.cabinet {
  width: 50%;
  height: 90%;
  border: 4px solid #ffffff;
  background: rgba(0, 138, 255, 0.6);
  padding-bottom: 45px;
  position: relative;
  display: flex;
  flex-direction: column;
  &__main {
    border: 2px solid #ffffff;
    flex: 1;
    margin: 20px 28px 90px 28px;
    display: flex;
    flex-direction: column;
  }
  &__footer {
    width: 100%;
    height: 3px;
    background: #5dc9fe;
  }
}
.cabinet::before {
  position: absolute;
  left: 54px;
  top: -104px;
  content: '';
  background-image: url(/src/assets/images/camera.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 96px;
  height: 104px;
}
</style>
